<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>开启或关闭预约服务</title>
  <script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}" src="js/jquery/jquery-3.3.1.js" ></script>
  <script type="text/javascript" th:src="@{/js/zw.js}" src="js/zw.js" ></script>
<link th:href="@{/css/login.css}" href="css/login.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" th:href="@{/css/cloudstyle.css}" href="css/cloudstyle.css"/>
<!-- layer -->
<link type="text/css" rel="stylesheet" th:href="@{/plug/layui/css/layui.css}"/>
<script type="text/javascript" th:src="@{/plug/layui/layui.all.js}"  src="plug/layui/layui.all.js" ></script>
<style type="text/css">
input::-webkit-input-placeholder {
	color:#fff;
}
#login2 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    padding: 13px 0;
    background: #ffd400;
    display: inline-block;
    width: 50%;
	outline:none;
	border:2px  #FFF;
	cursor:pointer;
	text-transform:uppercase;
}
#login1 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    padding: 13px 0;
    background: #ff3366;
    display: inline-block;
    width: 50%;
	outline:none;
	border:2px  #FFF;
	cursor:pointer;
	text-transform:uppercase;
}
.div-a{ position:fixed; left:20px; top:20px; background:#F00;padding: 10px;color: #FFF;z-index: 999}  
.div-b{ position:fixed; right:20px; top:20px; background:#F00;padding: 10px;color: #FFF;z-index: 999} 
</style>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>

</head>
<body>
<div class="sky" style="position:absolute; width:100%; top:0px;height:100%;opacity:0.75;"></div>
<div class="login-form" style="position:relative;">
		<div class="login" >
			<span ><img src="imgs/hhit/hhit.png" alt="hhit"  style="position: relative; left: 44%; top:-15px; width: 150px; height: 150px;"/></span>
		</div>
		<h1><a  href='http://www.jack1996.com:8081/index' target='view_window' style='color:#FFF'>江苏海洋大学图书馆预约抢座系统V3.0</a></h1>
		<a href="/jz">
			<div class="div-a">点我捐助服务器</div>   
		</a>
		<a href="/jz">
			<div class="div-b">点我捐助服务器</div>   
		</a>
		<div class="login-top">
		<form>
			<div class="login-ic">
				<i class="layui-icon layui-icon-username" style="font-size: 30px; color: #fff;"></i>
				<input type="text"  placeholder="学号" id="u"/>
				<div class="clear"> </div>
			</div>
			<div class="login-ic">
				<i class="layui-icon layui-icon-password" style="font-size: 30px; color: #fff;"></i>
				<input type="password"  placeholder="密码" id="p" name="p"  />
				<div class="clear"> </div>
			</div>
			<div class="login-ic">
				<i class="layui-icon layui-icon-notice" style="font-size: 30px; color: #fff;"></i>
				<input type="text"  placeholder="常用邮箱" lay-verify="email" id="e" name="e"  />
				<div class="clear"> </div>
			</div>
			<div class="log-bwn">
				<input type="button"  id="login2" value="开启预约" onclick="toON(1)"><input type="button"  id="login1" value="关闭预约" onclick="toON(0)">
			</div>
		</form>
	</div>
</div>
</body>
</html>


<script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var laydate = layui.laydate;
  var form = layui.form;
  //执行一个laydate实例
  laydate.render({
    elem: '#test1' //指定元素
  });

  //自定义验证规则  
  form.verify({  
       phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位，只能是数字！']  
        ,email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '邮箱格式不对']  
  });  
});


function toON(flag){
	var u = $("#u").val();
	var p = $("#p").val();
	var em = $("#e").val();

	if(em&&u&&p&&(flag==0||flag==1)){
		$.ajax({
			type:"POST",
			async:true,  //默认true,异步
			data:{"u":u,"p":p,"em":em,"f":flag},
			dataType:'json',
			timeout:20000,
			url:"/toOn",
			success:function(data){
				layer.alert(data.message, {icon: data.result=="success"?1:2});
		    },
		    error:function(data) {
		    	layer.alert('服务器错误,请联系开发人员！', {icon: 2});
		    }
		});
	}else{
		if(!u){
			layer.open({
				  title: '错误提示'
				  ,content: '请输入登录学号'
			}); 
		}else if(!p){
			layer.open({
				  title: '错误提示'
				  ,content: '请输入登录密码'
			}); 
		}else if(!em){
			layer.open({
				  title: '错误提示'
				  ,content: '请输入邮箱地址'
			}); 
		}else if(!flag){
			layer.open({
				  title: '错误提示'
				  ,content: '预约方式不正确'
			}); 
		}
	}
	$("#login1").attr("disabled","disabled"); 
	$("#login1").css({'background-color':'#708090'});
	$("#login2").attr("disabled","disabled"); 
	$("#login2").css({'background-color':'#888'});
}

$(function(){
	$('body').on('input propertychange', '.login-ic', function(event) {
        $("#login1").removeAttr("disabled");
    	$("#login1").css({'background-color':'#ff3366'});
    	$("#login2").removeAttr("disabled");
    	$("#login2").css({'background-color':'#ffd400'});
    });
});
</script>